<script setup lang="ts">
import axios from 'axios';
import {onMounted, ref} from 'vue';
import qs from "qs";


let simleInput = ref("O=C(OCC1=CC(OCCCCCCCCCCCC)=CC(OCCCCCCCCCCCC)=C1)C1=CC(OCCOCCOCCOC(=O)CCCN2CCCCC2)=C(OCCOCCOCCOCC2=CC=CC=C2)C(OCCOCCOCCOC(=O)CCCN2CCCCC2)=C1");
let imageData = ref("");

async function submitSimle() {
  axios
      .post(`rdkit/generate_image`, qs.stringify({
        simle: simleInput.value,
      }), {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
        responseType: 'blob',
      })
      .then(response => {
        const blob = new Blob([response.data], {type: 'image/png'});
        imageData.value = URL.createObjectURL(blob);
      })
      .catch(function (error) {
        console.log(error);
      })
}

onMounted(() => {
  submitSimle();
})
</script>


<template>
  <div style="width: 90vw; margin-left: auto; margin-right: auto;">
    <h2>Please Enter Simle: </h2>
    <div style="display: flex; flex-direction: row; align-items: center;">
      <el-input
          v-model="simleInput"
          :rows="2"
          type="textarea"
          placeholder="Please Enter Simle:"
          style="width: 80vw;"
      />
      <el-button type="primary" @click="submitSimle" style="margin-left: 20px;">Submit</el-button>
    </div>

    <div v-if="imageData" style="margin-left: auto; margin-right: auto; width: 80vw; text-align: center">
      <el-image
          style="height: 70vh"
          :src="imageData"
          :zoom-rate="1.1"
          :max-scale="2.5"
          :min-scale="0.5"
          :preview-src-list="[imageData]"
          :initial-index="0"
          fit="cover"/>
    </div>
  </div>
</template>

<style scoped>

</style>